<template>
	<div class="global-deploy" id="content-leftFirst">
		<div class="content-leftFirst" v-if="isActiveGlobal">
			<span class="firt-title">全局配置</span>
			<el-divider></el-divider>
			<div class="content">
				<el-tabs v-model="workFlow.activeName" @tab-click="handleClick">
					<el-tab-pane label="AI坐席属性" name="five" class="ai-mode-global">
						<ChooseMode></ChooseMode>
					</el-tab-pane>
					<el-tab-pane label="常规匹配" name="first" class="routine"> </el-tab-pane>
					<el-tab-pane label="人脸比对" name="second" class="face">
						<ul class="face-ul">
							<li>
								<span>开启实时人脸比对</span>
								<el-radio-group v-model="workFlow.isRealTime" :disabled="showDetail">
									<el-radio v-for="item in workFlow.keyList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
								</el-radio-group>
							</li>
							<li class="detection-li">
								<span class="detection">检测时间间隔</span>
								<el-input
									v-model="workFlow.intervalMS"
									:disabled="showDetail"
									type="number"
									class="width-input detection-input"
									@mousewheel.native.prevent
									@keyup.native="prevent($event)"
									@oninput="checkNum(value)"
									id="input"
									min="0"
								></el-input>
								<span class="detection-time">ms</span>
							</li>
							<li class="threshold-li">
								<span class="threshold">阈值</span>
								<el-input
									v-model="workFlow.confidence"
									:disabled="showDetail"
									type="number"
									class="width-input threshold-input"
									@mousewheel.native.prevent
									@keyup.native="prevent($event)"
									@oninput="checkNum(value)"
									id="input"
									min="0"
								></el-input>
							</li>
							<li class="detection-btn">
								<el-button @click="closeBtn">关闭</el-button>
								<el-button class="confirm-btn" @click="save(1)" v-if="!showDetail">确定</el-button>
							</li>
						</ul>
					</el-tab-pane>
					<el-tab-pane label="活体检测" name="third" class="face">
						<ul class="face-ul">
							<li>
								<span>开启实时活体检测</span>
								<el-radio-group v-model="workFlow.isFaceLiveRealTime" :disabled="showDetail">
									<el-radio v-for="item in workFlow.keyList" :label="item.value" :key="item.value">{{ item.label }}</el-radio>
								</el-radio-group>
							</li>
							<li class="detection-li">
								<span class="detection">检测时间间隔</span>
								<el-input
									v-model="workFlow.faceLiveIntervalMS"
									:disabled="showDetail"
									type="number"
									class="width-input detection-input"
									@mousewheel.native.prevent
									@keyup.native="prevent($event)"
									@oninput="checkNum(value)"
									id="input"
									min="0"
								></el-input>
								<span class="detection-time">ms</span>
							</li>
							<li class="threshold-li">
								<span class="threshold">阈值</span>
								<el-input
									v-model="workFlow.faceLiveConfidence"
									:disabled="showDetail"
									type="number"
									class="width-input threshold-input"
									@mousewheel.native.prevent
									@keyup.native="prevent($event)"
									@oninput="checkNum(value)"
									id="input"
									min="0"
								></el-input>
							</li>
							<li class="detection-btn">
								<el-button @click="closeBtn">关闭</el-button>
								<el-button class="confirm-btn" @click="save(2)" v-if="!showDetail">确定</el-button>
							</li>
						</ul>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</div>
</template>

<script>
import ChooseMode from '../ChooseAiMode/ChooseMode.vue';
export default {
	props: {
		editBusinessId: {
			type: String,
			required: true,
			default: () => ''
		},
		editBusinessName: {
			type: String,
			required: true,
			default: () => ''
		},
		isActiveGlobal: {
			type: Boolean,
			required: true,
			default: () => false
		},
		globalWorkFlow: {
			type: Object,
			required: true,
			default: () => {}
		},
		showDetail: {
			type: Boolean,
			default: () => false,
			required: true
		}
	},
	data() {
		return {
			globalisShow: true,
			workFlow: this.globalWorkFlow
		};
	},
	components: {
		ChooseMode
	},
	mounted() {},
	methods: {
		handleClick() {},
		closeBtn() {
			this.$emit('closeBtn');
		},
		save(type) {
			this.$emit('saveBtn', type);
		},
		// input框只能输入整数，获取键盘码
		prevent(e) {
			let keynum = window.event ? e.keyCode : e.which;
			if (keynum === 189 || keynum === 190 || keynum === 109 || keynum === 110) {
				this.$message.warning('禁止输入小数以及负数');
				e.target.value = '';
			}
		},
		checkNum(val) {
			document.getElementById('input').value = val >= 0 ? val : 0;
		}
	}
};
</script>

<style lang="less" scope>
.global-deploy {
	.ai-mode-global {
		width: 620px;
		padding: 0 10px;
	}
	.content-leftFirst {
		position: absolute;
		left: -180px;
		.content {
			.el-tabs__content {
				overflow: initial;
				position: static;
			}
			.el-tabs__item {
				padding: 0 10px;
			}
			.el-tabs__item.is-active {
				background-color: #f4f7fb;
				color: #6384fe;
			}
			.el-tabs__nav-scroll {
				overflow: hidden;
				padding-left: 10px;
			}
			.el-tabs {
				margin-top: 15px;
			}
			.routine {
				padding-left: 10px;
				.routine-match {
					padding-bottom: 10px;
					.video-li {
						margin-top: -5px;
					}
					img {
						padding-bottom: 5px;
						// box-sizing: 12;
					}
					.desc {
						display: none;
						margin-left: 5px;
						color: #666666;
					}
					.imgQue:hover .desc {
						width: 300px;
						height: 60px;
						white-space: normal;
						word-break: break-all;
						display: inline-block;
						position: absolute;
						left: 120px;
						top: 100px;
						z-index: 2000;
						border: 1px solid #e6e7e9;
						border-radius: 5px;
						background-color: #fff;
						font-size: 10px;
						// overflow: hidden;
						padding: 10px;
					}
					.imgQue {
						cursor: pointer;
					}
					.el-radio {
						padding-left: 10px;
						margin-right: 5px;
					}
					.el-input__inner {
						height: 30px;
					}
					.el-input__icon {
						height: 35px;
					}
					.robot-li {
						margin-left: 30px;
						margin-top: 30px;
					}
					.el-select {
						width: 130px;
						height: 10px;
						background: #ffffff;
						border-radius: 4px;
						margin-top: 10px;
					}
					.robot {
						margin-right: 30px;
					}
					.routine-match-btn {
						text-align: right;
						margin-top: 40px;
						padding-right: 20px;
					}
					.confirm-btn {
						background: #6384fe;
						color: #fff;
					}
				}
			}
			.face {
				padding-left: 10px;
				.face-ul {
					padding-bottom: 10px;
					.el-radio {
						padding-left: 10px;
						margin-right: 5px;
					}
					.el-input__inner {
						width: 80px;
						height: 30px;
						line-height: 30px;
						padding: 0;
					}
					.detection-li {
						margin-top: 10px;
						.detection {
							padding-left: 20px;
						}
						.detection-input {
							margin-left: 20px;
						}
						.detection-time {
							margin-left: 10px;
						}
					}
					.threshold-li {
						margin-top: 20px;
						.threshold {
							padding-left: 70px;
						}
						.threshold-input {
							margin-left: 27px;
						}
					}
					.detection-btn {
						margin-top: 40px;
						text-align: right;
						padding-right: 20px;
					}
					.confirm-btn {
						background: #6384fe;
						color: #fff;
					}
				}
			}
			.width-input {
				width: 83px;
				height: 10px;
			}
		}
	}
}
</style>

<style lang="less" scoped>
.global-deploy {
	.content-leftFirst {
		min-width: 280px;
		min-height: 300px;
		background: #ffffff;
		box-shadow: 0px 2px 22px 2px rgba(0, 0, 0, 0.08);
		margin: 20px 0px 0px 55px;
		.firt-title {
			width: 56px;
			height: 13px;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 700;
			color: #333333;
			line-height: 40px;
			padding-left: 10px;
			text-align: center;
		}
		.el-divider {
			margin: -5px 0;
			width: 100%;
			height: 1px;
			background: #f7f8fb;
		}
	}

	.content {
		/deep/ .el-tabs__nav-wrap::after {
			position: static !important;
		}
		/deep/ .el-tabs__active-bar {
			background-color: transparent !important;
		}
	}
}
#content-leftFirst,
.style {
	position: absolute;
	left: 220px;
	z-index: 20;
}
</style>
